
<template>
  <div>
    <el-row>
      <el-col :span="12" class="bordered-col">
        <div><span class="large-text">第一步：单击行选择商品</span>
          <el-form inline>
          <el-row type="flex" align="middle">
            <el-col :span="9">
              <el-form-item label="商品:">
                <el-input v-model="keyword.multiple" placeholder="条码、名称、规格、型号等"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9">
              <el-form-item label="类别:">
                <el-select v-model="keyword.categoryName" placeholder="">
                  <el-option
                    v-for="option in categoryOptions"
                    :key="option.id"
                    :label="option.name"
                    :value="option.name">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button @click="resetForm">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
            @row-click="materialClick"
            highlight-current-row>
            <el-table-column
              prop="id"
              label="#"
              width="72">
            </el-table-column>
            <el-table-column
              prop="barCode"
              label="条码"
              width="140">
            </el-table-column>
            <el-table-column
              prop="name"
              label="名称"
              width="180">
            </el-table-column>
            <el-table-column
              prop="standard"
              label="规格"
              width="130">
            </el-table-column>
            <el-table-column
              prop="model"
              label="型号"
              width="130">
            </el-table-column>
            <el-table-column
              prop="categoryName"
              label="类别"
              width="120">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位"
              width="80">
            </el-table-column>
          </el-table>
<!--          @size-change="handleSizeChange"-->
<!--          :current-page="currentPage4"-->
<!--          :page-sizes="[100, 200, 300, 400]"-->
          <el-pagination class="pagination-container"
            @current-change="handleCurrentChange"
            :page-size="keyword.pageSize"
            layout="total, prev, pager, next"
            :total="pageTotal">
          </el-pagination>
        </div>
      </el-col>
      <el-col :span="12" class="bordered-col">
        <div><span class="large-text">第二步：为选中的商品设置物料及工序</span></div>
        <div>
          <!-- 商品条码和名称输入框 -->
          <el-form>
            <el-row>
              <el-col :span="12">
                <el-form-item label="商品条码：">
                  <el-input v-model="barCodes.barCode" placeholder="请输入条码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="商品名称：">
                  <el-input v-model="productName" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>

          <!-- 选项卡 -->
          <el-tabs v-model="firsts">
            <el-tab-pane label="所需物料" name="materials">
              <!-- 对应物料信息搜索 -->
              <el-form inline>
                <el-form-item label="商品信息：">
                  <el-input v-model="productInfo" placeholder="条码、名称、规格、型号"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="searchBomMaterial">查询</el-button>
                </el-form-item>
              </el-form>
              <!-- 操作按钮 -->
              <el-button type="primary" @click="addMaterial" size="small"><i class="el-icon-plus"></i>新增</el-button>
              <el-button type="danger" @click="removeMaterial" size="small"><i class="el-icon-delete"></i>删除</el-button>
              <el-button type="success" @click="importData" size="small"><i class="el-icon-download"></i>导入</el-button>
              <el-button type="warning" @click="exportData" size="small"><i class="el-icon-upload2"></i>导出</el-button>
                    总数量：{{ totalQuantity }}, 总费用：{{ totalCost }}
              <!-- 物料列表表格 -->
              <el-table :data="materialList"
                        style="width: 100%"
                        @selection-change="bomMaterialChange"
              >
                <el-table-column width="40" type="selection"></el-table-column>
                <el-table-column prop="id" label="#" width="70"></el-table-column>
                <el-table-column label="操作" width="70">
                  <el-button type="text" @click="editMaterial">编辑</el-button>
                </el-table-column>
                <el-table-column prop="barCode" label="条码" width="70"></el-table-column>
                <el-table-column prop="name" label="名称" width="100"></el-table-column>
                <el-table-column prop="standard" label="规格" width="70"></el-table-column>
                <el-table-column prop="model" label="型号" width="70"></el-table-column>
                <el-table-column prop="unit" label="单位" width="70"></el-table-column>
                <el-table-column prop="multiple" label="多属性" width="70"></el-table-column>
                <el-table-column prop="count" label="数量" width="70"></el-table-column>
                <el-table-column prop="cost" label="费用" width="70"></el-table-column>
                <el-table-column prop="remark" label="备注" width="70"></el-table-column>
              </el-table>
              <!-- 分页和统计信息 -->
            </el-tab-pane>
            <el-tab-pane label="生产工序" name="processes">
              <!-- 生产工序的内容 -->
              <div>
                <el-button type="primary" @click="addProcess">新增</el-button>
                <el-button type="danger" @click="removeProcess">删除</el-button>
                总工价：{{ totalLaborCost }}
                <el-table :data="processes" style="width: 100%">
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column prop="id" label="#" width="50"></el-table-column>
                  <el-table-column prop="operation" label="操作" width="100"></el-table-column>
                  <el-table-column prop="executionOrder" label="执行顺序" width="100"></el-table-column>
                  <el-table-column prop="processName" label="工序名称" width="100"></el-table-column>
                  <el-table-column prop="operator" label="负责人员" width="100"></el-table-column>
                  <el-table-column prop="billingMethod" label="计费方式" width="100"></el-table-column>
                  <el-table-column prop="laborCost" label="工价" width="100"></el-table-column>
                  <el-table-column prop="remarks" label="备注" width="100"></el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { MessageBox } from 'element-ui';
import axios from 'axios';
import { deleteBomMaterialById,editBomMaterial, getCategoryList, getMaterialList, getBomMaterialList,getBomMaterialTotalCount,getBomMaterialTotalCost } from '@/api/api'
export default {
  data() {
    return {
      keyword:{
        multiple: '',
        categoryName: '',
        pageSize:5,   //显示条数
        pageNum: 1  //当前页
      },
      barCodes:{
        barCode:'',
      },
      selectId:{
        id:''
      },
      firsts:'materials',
      productId:0,
      productInfo:'',
      productName:'',
      totalLaborCost:1,
      totalQuantity:1,
      totalCost:1,
      pageTotal: 1,    //总页数
      tableData: [], //商品列表
      processes:[],   //工序列表
      materialList:[],  //物料列表
      categoryOptions: [], // 用于存储分类标签
      selectedRows:[],//选中的行数据
      selectedId:[],//选中的行数据条码
    };
  },
  created() {
    this.getCategory();
    this.search();
  },
  methods: {

    bomMaterialChange(val){
      //Bom物料选中行
      this.selectedRows=val;
      this.selectedId=this.selectedRows.map(row =>row.id);
      console.log(this.selectedId)
      this.selectedId.forEach(item=>{
        console.log(item)
      })
    },
    editMaterial(){
      //编辑BOM物料
      alert("编辑");
      editBomMaterial().then((res)=>{
        if (res.code===200){
        }
      })
    },
    getCategory(){
      //商品分类获取
      getCategoryList().then((res)=>{
        if (res.code===200){
          this.categoryOptions=res.data
        }
      })
    },
    search() {
      //商品查询
      getMaterialList(this.keyword).then((res)=>{
        if (res.code===200){
          this.tableData=res.data.records
          this.pageTotal=res.data.total
        }
      })
    },
    resetForm() {
      //重置
      this.keyword.multiple = '';
      this.keyword.categoryName = '';
      this.search(); // 重置后重新搜索
    },
    handleCurrentChange(page) {
      //换页
      this.keyword.pageNum = page;
      this.search(); // 切换页码时重新搜索
    },
    searchBomMaterial(){
      getBomMaterialList(this.barCodes).then((res)=>{
        //查询对应物料
        if (res.code===200){
          this.materialList=res.data;
        }
      });
      getBomMaterialTotalCount(this.barCodes).then((res)=>{
        //物料总数量
        if (res.code===200){
          this.totalQuantity=res.data;
        }
      });
      getBomMaterialTotalCost(this.barCodes).then((res)=>{
        //物料总费用
        if (res.code===200){
          this.totalCost=res.data;
        }
      });
    },
    materialClick(row){
      //选中商品事件
      this.barCodes.barCode=row.barCode;
      this.productName=row.name;
      this.searchBomMaterial();
    },
    addMaterial() {
      // 新增物料
    },
    removeMaterial() {
      // 删除物料
      console.log('remove');
      if (!this.selectedRows || this.selectedRows.length === 0) {
        MessageBox.alert('请先选择要删除的物料',{type:'error'})
      }else {
        MessageBox.confirm('你确定要删除这条记录吗？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const selectedIds=this.selectedId.slice();
          for (let i=0;i<selectedIds.length;i++){
            this.selectId.id=selectedIds[i];
            console.log(this.selectId.id)
            deleteBomMaterialById(this.selectId).then((res)=>{
              //物料总费用
              if (res.code===200){
                console.log('成功删除物料'+this.selectId.id)
              }
            });
            this.searchBomMaterial();
          }
        }).catch(() => {
          // 用户点击了“取消”
          console.log('删除取消');
        });
      }
    },
    importData() {
      // 实现导入逻辑
    },
    exportData() {
      // 实现导出逻辑
    },
    addProcess(){
      //新增工序
    },
    removeProcess(){
      //删除工序
    }
  }
};
</script>

<style scoped>
 .el-col {
  padding: 20px; /* 在四周添加 20px 的内边距 */
 }
 .bordered-col {
   border: 1px solid #ccc;
 }
 body {
   background-color: white;
 }
 .large-text {
   font-size: 24px;
 }
 .pagination-container {
   margin-left: 450px;
 }
</style>